<template>
  <div class="invoice">
    <div class="invoice-round left">
      <i v-for="num in 15" :key="num" class="round"></i>
    </div>
    <div class="invoice-body">
      <div class="invoice-header">
        <div class="invoice-title">
          <h1>湖南{{ invoce.InvoiceType }}</h1>
        </div>
      </div>
      <div class="invoice-date">
        <span class="yellow"></span>
        开票日期:
        <span class="print ml1">{{ new Date().format("yyyy年MM月dd日") }}</span>
      </div>
      <table
        width="100%"
        border="0"
        cellspacing="1.6"
        cellpadding="4"
        bgcolor="#cd8846"
        class="tabtop13"
        align="center"
      >
        <tr>
          <td colspan="1" width="1%" rowspan="1">
            <div class="wv">购买方</div>
          </td>
          <td colspan="16" width="100%">
            <div class="row">
              <div style="width: 7rem">
                <div class="font-justify">名称</div>
                <div class="font-justify">纳税人识别号</div>
                <div class="font-justify">地址、电话</div>
                <div class="font-justify">开户行及账户</div>
              </div>
              <div style="width: 3%">
                <div>:</div>
                <div>:</div>
                <div>:</div>
                <div>:</div>
              </div>
              <div style="width: 80%" class="font-left">
                <div class="print">{{ invoce.MerchantName }}</div>
                <div class="print">{{ invoce.BuyerTaxNumber }}</div>
                <div class="print">{{ invoce.BuyerAddressPhone }}</div>
                <div class="print">{{ invoce.BuyerBank }}</div>
              </div>
            </div>
          </td>

          <td colspan="1" width="1%" rowspan="1">
            <div class="text-v">密码区</div>
          </td>
          <td colspan="10" width="10%" rowspan="1"></td>
        </tr>

        <tr>
          <td colspan="7" width="20%">
            <div>货物或应税劳务、服务名称</div>
            <div class="block">
              <span class="print">
                {{ invoce.Invoicesubject }}
              </span>
            </div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block">合 计</div>
          </td>
          <td colspan="3" width="9%">
            <div>规格型号</div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </td>
          <td colspan="3" width="9%">
            <div>单位</div>
            <div><span class="print">次</span></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </td>
          <td colspan="3" width="9%">
            <div>数量</div>
            <div>
              <span class="print">1</span>
            </div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </td>
          <td colspan="3" width="9%">
            <div>单价</div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </td>
          <td colspan="3" width="9%">
            <div>金额</div>
            <div>
              <span class="print">{{ invoce.Amount }}</span>
            </div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="">
              <span class="print">￥{{ invoce.Amount }}</span>
            </div>
          </td>
          <td colspan="3" width="9%">
            <div>税率</div>
            <div>
              <span class="print">6%</span>
            </div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
          </td>
          <td colspan="3" width="9%">
            <div>税额</div>

            <div>
              <span class="print"> {{ invoce.TaxAmount }}</span>
            </div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
            <div class="block">
              <span class="print">￥{{ invoce.TaxAmount }}</span>
            </div>
          </td>
          <!-- <td colspan="5" width="18%">
                  <div>含税金额</div>
                  <div>(最大值:1059998)</div>
                  <div>
                    <span class="print">{{ invoce.InvoiceAmount }}</span>
                  </div>
                  <div class="block"></div>
                  <div class="block"></div>
                </td> -->
        </tr>
        <!-- <tr>
                <td colspan="6"></td>
                <td colspan="2"></td>
                <td colspan="2">次</td>
                <td colspan="2">1</td>
                <td colspan="2">{{ invoce.invoiceAmount / 1.06 }}</td>
                <td colspan="2">
                  {{ (invoce.invoiceAmount / 1.06).toFixed(2) }}
                </td>
                <td colspan="2">6%</td>
                <td colspan="2">
                  {{ ((invoce.invoiceAmount / 1.06) * 0.06).toFixed(2) }}
                </td>
                <td colspan="2">123</td>
              </tr> -->

        <tr>
          <td colspan="7">价税统计（大写）</td>
          <td colspan="21">
            <div class="row">
              <div class="col-1" style="text-align: left; padding-left: 1em">
                <span class="print">
                  <i class="el-icon-circle-close"></i>
                  {{ changeNumMoneyToChinese(invoce.InvoiceTaxAmount) }}
                </span>
              </div>
              <div class="col-1">
                （小写）
                <span class="print">
                  ￥ {{ Number(invoce.InvoiceTaxAmount).toFixed(2) }}
                </span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="1">
            <div class="wv">销售方</div>
          </td>
          <td colspan="16">
            <div class="row">
              <div style="width: 7rem">
                <div class="font-justify">名称</div>
                <div class="font-justify">纳税人识别号</div>
                <div class="font-justify">地址、电话</div>
                <div class="font-justify">开户行及账户</div>
              </div>
              <div style="width: 3%">
                <div>:</div>
                <div>:</div>
                <div>:</div>
                <div>:</div>
              </div>
              <div style="width: 80%" class="font-left">
                <div class="print">{{ invoce.ServiceProviderName }}</div>
                <div class="print">{{ invoce.SellerTaxNumber }}</div>
                <div class="print">{{ invoce.SellerAddressPhone }}</div>
                <div class="print">{{ invoce.SellerBank }}</div>
              </div>
            </div>
          </td>
          <td colspan="1">
            <div class="wv">备注</div>
          </td>
          <td colspan="10" class="remarks">
            <div class="print text">{{ invoce.Remarks }}</div>
          </td>
        </tr>
      </table>

      <div class="row jcsa invoice-footer">
        <div>收款人：</div>
        <div>复核：</div>
        <div>开票人：</div>
        <div>销售方：（章）</div>
      </div>
    </div>
    <div class="invoice-round right">
      <i v-for="num in 15" :key="num" class="round"></i>
    </div>
  </div>
</template>

<script>
import { changeNumMoneyToChinese } from "../../plugins/changeNumMoneyToChinese";
export default {
  props: {
    invoce: Object,
  },
  methods: {
    changeNumMoneyToChinese,
  },
};
</script>

<style lang="less" scoped>
.invoice {
  border: 2px solid #8bbdff;
  width: 100%;
  display: flex;
  font-family: "楷体";
  color: #cd8846; // 409eff

  .invoice-round {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    &.left {
      border-right: 2px dashed #8bbdff;
    }
    &.right {
      border-left: 2px dashed #8bbdff;
    }
    .round {
      border: 2px solid #8bbdff;
      border-radius: 50%;
      width: 1.3rem;
      height: 1.3rem;
      display: block;
      margin-bottom: 1rem;
      &:first-child {
        margin-top: 1rem;
      }
    }
  }
  .invoice-body {
    flex: 23;
    padding: 2rem 2rem;
    .invoice-header {
      height: 6rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .invoice-title {
        font-size: 1.3rem;
        > h1 {
          border-bottom: 4px double #cd8846;
          padding: 1rem;
        }
      }
    }
    .invoice-date {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }
    .invoice-footer {
      margin-top: 1ex;
    }
  }
  // padding: 0 1rem;
  .el-badge {
    width: 100%;
  }
  /* CSS Document */
  .tabtop13 {
    margin-top: 13px;

    display: table;
    border-collapse: separate;

    text-indent: initial;
    // border-spacing: 2px;
    border-color: #c87c35 !important;
    border-top-color: #c87c35;
    border-right-color: #c87c35;
    border-bottom-color: #c87c35;
    border-left-color: #c87c35;

    td {
      background-color: #ffffff;
      height: 25px;
      line-height: 150%;
      text-align: center;
    }
  }
  .font-center {
    text-align: center;
  }
  .btbg {
    background: #e9faff !important;
  }

  .title {
    font-family: 微软雅黑;
    font-size: 26px;
    font-weight: bold;
    border-bottom: 1px dashed #c87c35;
    color: #255e95;
  }
  .titfont {
    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bold;
    color: #255e95;
    background-color: #e9faff;
  }
  .text-v {
    width: 1rem;
    margin: 0 auto;
  }
  .remarks {
    text-align: left !important;
    .text {
      height: 100%;
    }
  }
}
</style>
